<template>
  <div >
    <div class="showPlace" :key="pageKey" v-if="reFresh">
      <div id="showul">
      <ul>
        <li v-for="(obj,i) in examCardList" :key="obj.title" :class="getColor(i)">
          <div class="shang">
            <div :class="'checkCirle ' + (obj.selected ? 'onCheck' : 'noCheck')" @click="clickItemCircle(i)">
<!--              <input type="checkbox" :value="obj" v-model="checkedCardList">-->
            </div>
            <div class="cardTitle">{{obj.title}}</div>
            <img src="../../../assets/img/icon/jiantou.png" @click="clickJiantou(i)">
          </div>
          <div class="xia">
            <div class="add">
              <p>{{(obj.add == null ? '请选择加分': obj.add)}}</p>
              <img src="../../../assets/img/icon/jiantou_dowm.svg" @click="choiceAddMark(i)">
            </div>
            <div class="relu">
              <p>{{obj.relu == null ? '请选择条例': getReluString(obj.relu)}}</p>
              <img src="../../../assets/img/icon/jiantou_dowm.svg" @click="choiceRelu(i)">
            </div>
          </div>
        </li>
      </ul>
      </div>
      <div class="bottomBar">
        <div class="selectAll">
          <div :class=" (checkAll ? 'circle onCheck1': 'circle')" :id="checkAll?'noBorder':''" @click="checkAllCards"></div>
          <p>全选</p>
        </div>
        <div class="batchDeal" @click="changeBatchDealState">
          <!--        <img src="../../../assets/img/icon/star.svg">-->
          <div :class="(state2 ? 'batchDeal-img2':'batchDeal-img')"></div>
          <p :id="(state2 ? 'yellow': '')">{{(state2 ? '完成':'批量处理')}}</p>
        </div>
        <div class="_buttom" @click="clickButtom">{{(state1 ? '不': '')}}通过<span v-if="checkedCardList.length">({{this.checkedCardList.length}})</span>
        </div>
      </div>
    </div>
<!--    加分项选择-->
    <div class="addMarkWindow" v-show="showAddMarkWindow" @click="finishiAddMark">
      <div class="item" v-for="(data,index) in alwaysAddItems" :key="index">
        <div :class="(markIndex == index ? 'circle2': 'circle')" @click.stop="clickMarkCircle(index)"></div>
        <div class="mark" :id="(markIndex == index ? 'blue':'')">{{data.mark}}</div>
      </div>
      <div class="constItem">
        <div :class="(markIndex == 7 ? 'circle2': 'circle')" @click.stop="clickMarkCircle(7)"></div>
        <div class="mark" :id="(markIndex == 7 ? 'blue':'')">不加分</div>
      </div>
      <div class="constItem">
        <div :class="(markIndex == 8 ? 'circle2': 'circle')" @click.stop="clickMarkCircle(8)"></div>
        <input class="inputMark" placeholder="请输入数字" v-model="inputMark" :id="(markIndex == 8 ? 'blue':'')" @click.stop="doNot">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
import config from '../../../../vue.config'
import certificationServices from "@/service/certification";
export default {
  name: 'Exam',
  data () {
    return {
      pageKey: 1,
      reFresh: true,
      baseUrl: config.devServer.proxy['/student'].target + '/studentevaluation/api/otheract/',
      sourseList: [
        // {
        //   id:1,
        //   title: '大学英语四级证书',
        //   from: '个人',
        //   selected: false,
        //   add: null,
        //   relu: null,
        //   url: '',
        //   name: '111',
        //   number: '222',
        //   content: 'asdasasd'
        // },
        // {
        //   id: 2,
        //   title: '计算机二级证书（C语言程序设计）',
        //   from: '个人',
        //   selected: false,
        //   add: null,
        //   relu: null,
        //   url: '',
        //   name: '111',
        //   number: '222',
        //   content: 'asdasasd'
        // },
        // {
        //   id: 3,
        //   title: '第一届“诗尼曼”简历设计一等奖',
        //   from: '学院',
        //   selected: false,
        //   add: null,
        //   relu: null,
        //   url: '',
        //   name: '111',
        //   number: '222',
        //   content: 'asdasasd'
        // },
        // {
        //   id: 4,
        //   title: '大学英语六级证书',
        //   from: '个人',
        //   selected: false,
        //   add: null,
        //   relu: null,
        //   url: '',
        //   name: '111',
        //   number: '222',
        //   content: 'asdasasd'
        // }
      ],
      examCardList: [
        // {
        //   id:1,
        //   title: '大学英语四级证书',
        //   from: '个人',
        //   selected: false,
        //   add: null,
        //   relu: null,
        //   url: '',
        //   name: '111',
        //   number: '222',
        //   content: 'asdasasd'
        // },
        // {
        //   id: 2,
        //   title: '计算机二级证书（C语言程序设计）',
        //   from: '个人',
        //   selected: false,
        //   add: null,
        //   relu: null,
        //   url: '',
        //   name: '111',
        //   number: '222',
        //   content: 'asdasasd'
        // },
        // {
        //   id: 3,
        //   title: '第一届“诗尼曼”简历设计一等奖',
        //   from: '学院',
        //   selected: false,
        //   add: null,
        //   relu: null,
        //   url: '',
        //   name: '111',
        //   number: '222',
        //   content: 'asdasasd'
        // },
        // {
        //   id: 4,
        //   title: '大学英语六级证书',
        //   from: '个人',
        //   selected: false,
        //   add: null,
        //   relu: null,
        //   url: '',
        //   name: '111',
        //   number: '222',
        //   content: 'asdasasd'
        // }
      ],
      checkedCardList: [],
      checkAll: false,
      type: {
        typeName: '综合',
        num: 78
      },
      showAddMarkWindow: false,
      inputMark: null,
      markIndex: 0,
      addMarkCardIndex: 0,
      choiseReluCardIndex: 0
    }
  },
  methods: {
    getColor: function (i) {
      var x = i % 3
      if (x == 0) {
        return 'purple'
      } else if (x == 1) {
        return 'yellow'
      } else return 'red'
    },
    clickItemCircle: function (i) {
      this.examCardList[i].selected = !this.examCardList[i].selected
      if (this.examCardList[i].selected) {
        // 添加到已选择
        this.checkedCardList.push(this.examCardList[i])
        if (this.checkedCardList.length == this.examCardList.length) this.checkAll = true
      } else if (!this.examCardList[i].selected) {
        this.checkAll = false
        // 删除
        var id = this.examCardList[i].id
        for (var j = 0; j < this.checkedCardList.length; j++) {
          if (this.checkedCardList[j].id == id) {
            this.checkedCardList.splice(j, 1)
            break
          }
        }
      }
      console.log(this.checkedCardList)
      console.log(this.examCardList)
    },
    checkAllCards: function () {
      this.checkAll = !this.checkAll
      if (this.checkAll) {
        for (var i = 0; i < this.examCardList.length; i++) {
          this.examCardList[i].selected = true
        }
        this.checkedCardList = this.examCardList.slice(0)
      } else {
        for (var i = 0; i < this.examCardList.length; i++) { this.examCardList[i].selected = false }
        this.checkedCardList = []
      }
      console.log(this.checkedCardList)
      console.log(this.examCardList)
    },
    changeBatchDealState: function () {
      if (this.$store.state.indexState1) return // 若处于不通过状态，点击失效
      var flag = this.$store.state.indexState2
      this.$store.commit('setIndexState2', !flag)
    },
    clickMarkCircle: function (index) {
      this.markIndex = index
    },
    finishiAddMark: function () {
      this.showAddMarkWindow = false
      this.$store.commit('changeCoverableState', false)
      // console.log(this.$store.state.coverable)
      var add = 0
      if (this.markIndex < 6) {
        add = this.alwaysAddItems[this.markIndex].mark
      } else if (this.markIndex == 8) {
        add = this.inputMark
      }
      this.examCardList[this.addMarkCardIndex].add = add
      console.log(this.examCardList)
    },
    doNot: function () {

    },
    choiceAddMark: function (i) {
      this.showAddMarkWindow = true
      this.$store.commit('changeCoverableState', true)
      this.addMarkCardIndex = i
    },
    choiceRelu: function (i) {
      this.$store.commit('changeCoverableState', true)
      if (this.$store.state.relus == null) {
        this.$store.commit('setShowEmpty', true)
        console.log('空空如也')
        return
      }
      this.$store.commit('setShowReluWindow', true)
      this.choiseReluCardIndex = i
    },
    getReluString: function (obj) {
      return obj.subject + '-[' + (obj.num + 1) + ']'
    },
    clickButtom: function () {
      // 按下底端按钮
      // 对当前的状态进行判断
      console.log('状态1：' + this.$store.state.indexState1)
      console.log('状态2：' + this.$store.state.indexState2)
      // 1、啥都没选
      // 2、通过状态：将信息完整的选择卡片提交后端，不完整的卡片保留
      // 3、不通过状态：将选中的进行不通过提交
      // 4、批量处理状态（通过）： 将选中的作为一个整体，统一通过弹窗进行选择加分与条目，并提交
      if (this.checkedCardList.length == 0) {
        console.log('1、啥都没选')
      } else if (!this.$store.state.indexState1 && !this.$store.state.indexState2) {
        console.log('2、通过状态：将信息完整的选择卡片提交后端，不完整的卡片保留')
        for (var i = 0; i < this.checkedCardList.length; i++) {
          console.log(this.checkedCardList[i])
          // 判断此卡片信息是否完整
          // 提交单个卡片操作(通过)
          var obj = this.checkedCardList[i]
          if (obj.relu == null || obj.add == null) continue
          //   id:1,
          //   title: '大学英语四级证书',
          //   from: '个人',
          //   selected: false,
          //   add: null,
          //   relu: null,
          //   url: '',
          //   name: '111',
          //   number: '222',
          //   content: 'asdasasd'
          // },
          var subject = 0
          if (obj.relu.subject == '德育')subject = 0
          else if (obj.relu.subject == '智育')subject = 1
          else if (obj.relu.subject == '体育')subject = 2
          var data = {
            id: obj.actId,
            from: obj.from,
            pass: true,
            subject: subject,
            index: obj.relu.num,
            mark: obj.add,
            college: this.$store.getters.getLoginUser.collegeName
          }
          console.log(data)
          axios({
            // lyl: 更新为 cloud接口
            url: '/studentevaluation/api/exam/exam',
            method: 'post',
            data: data
          }).then(res => {
            console.log('---------------exam--------------------')
            console.log(res)
            console.log('---------------exam--------------------')
            for (var i = 0; i < this.examCardList.length; i++) {
              if (this.examCardList[i].id == obj.id) {
                this.examCardList.splice(i, 1)
                break
              }
            }
          })
        }
      } else if (this.$store.state.indexState1 && !this.$store.state.indexState2) {
        console.log('3、不通过状态：将选中的进行不通过提交')
        for (var i = 0; i < this.checkedCardList.length; i++) {
          console.log(this.checkedCardList[i])
          // 提交单个卡片操作(不通过)
          var obj = this.checkedCardList[i]

          var data2 = {
            id: obj.actId,
            from: obj.from,
            pass: false,
            subject: null,
            index: null,
            mark: null,
            college: this.$store.getters.getLoginUser.collegeName
          }
          axios({
            // 更新为cloud接口
            url: '/studentevaluation/api/exam/exam',
            method: 'post',
            data: data2
          }).then(res => {
            for (var i = 0; i < this.examCardList.length; i++) {
              if (this.examCardList[i].id == obj.id) {
                this.examCardList.splice(i, 1)
                break
              }
            }
          })
        }
      } else if (this.$store.state.indexState2 && !this.$store.state.indexState1) {
        console.log('4、批量处理状态（通过）： 将选中的作为一个整体，统一通过弹窗进行选择加分与条目，并提交')
        // 获取所有卡片的id watch
        // 弹窗获得统一的加分
        // 弹窗获得统一的条目
        // 发送请求 watch
        this.$store.commit('changeCoverableState', true) // 幕布
        this.$store.commit('setShowIndexAddMarkWindow', true) // 加分
      } else {
        console.log('其他未知状态，请排除原因')
      }
    },
    clickJiantou: async function (i) {
      var obj = this.examCardList[i]
      if (obj.from === '社团') {
        // 社团提交的, 显示excel
        let result = await certificationServices.getActStudentsByActId(obj.actId)
        result = result.data.data
        result.unshift({
          name: '姓名',
          studentId: '学号',
          college: '学院'
        })
        let json = {
          name: 'excelview',
          params: {
            title: obj.title,
            content: result
          }
        }
        this.$router.push(json)
        return
      }
      // 如果是个人提交的, 显示图片
      var info = {
        url: obj.url,
        title: obj.title,
        content: obj.content,
        appeal: null,
        name: obj.name,
        number: obj.number
      }
      this.$store.commit('setInfo', info)
    }
  },
  updated () {
    // console.log(this.$route.params.type)
    // console.log(this.$store.state.indexExamType.typeName)
    console.log(this.type)
  },
  computed: {
    watchType () {
      return this.$store.state.indexExamType
    },
    state1: function () {
      return this.$store.state.indexState1
    },
    state2: function () {
      return this.$store.state.indexState2
    },
    alwaysAddItems: function () {
      return this.$store.state.alwaysAddItems
    },
    action: function () {
      return this.$store.state.action
    },
    action2: function () {
      return this.$store.state.action2
    }

  },
  watch: {
    watchType (old, _new) {
      // console.log(old + '-->'+ _new)
      // 下拉单选中的值发生改变，需要对展示列表进行更新
      console.log(this.$store.state.indexExamType)
      // this.sourseList = []
      this.type = this.$store.state.indexExamType
      // axios({
      //   url: '/college/hello',
      //   methods: 'get',
      //   params: {
      //     userName: '数学与信息学院'
      //   }
      // }).then(res => {
      //   console.log(res)
      //   // {
      //   //   id:1,
      //   //     title: '大学英语四级证书',
      //   //   from: '个人',
      //   //   selected: false,
      //   //   add: null,
      //   //   relu: null,
      //   //   url: '',
      //   //   name: '111',
      //   //   number: '222',
      //   //   content: 'asdasasd'
      //   // },
      //   var list = []
      //   for (var i = 0; i < res.data.length; i++) {
      //     var obj = res.data[i]
      //     if (obj.passed == true) continue
      //     list.push(
      //       {
      //         id: obj.actId,
      //         title: obj.actName,
      //         from: '社团',
      //         selected: false,
      //         add: null,
      //         relu: null,
      //         name: obj.organization,
      //         number: obj.uploaderId,
      //         content: obj.actName
      //       }
      //     )
      //     ++this.pageKey
      //   }
      // })
      if (this.type.typeName == '综合') {
        this.examCardList = this.sourseList.slice(0) // 综合展示全部
        console.log('展示列表更新为综合')
      } else {
        var list = []
        for (var i = 0; i < this.sourseList.length; i++) {
          if (this.sourseList[i].from == this.type.typeName) {
            list.push(this.sourseList[i])
          }
        }
        this.examCardList = list
        console.log('展示列表更新')
      }
    },
    action (old, _new) {
      console.log('一次异步操作完成')
      if (!this.$store.state.yes) {
        console('no yes')
        return
      }
      var relu = this.$store.state.selectedRelu
      console.log(relu)
      this.examCardList[this.choiseReluCardIndex].relu = {
        num: relu.num,
        subject: relu.subject
      }
      console.log(this.examCardList)
    },
    action2 (o, n) {
      console.log('exam action2 监听')
      console.log('asdadddddddddddddddddddddddddddddddddddddddd')
      // 将所有选中的cards以统一的加分以及条目进行审批，提交后端
      var add = this.$store.state.addMark
      var relu = this.$store.state.selectedRelu
      var cards = this.checkedCards
      if (!this.$store.state.yes) {
        console.log('yes is not true')
        return
      }
      console.log(add)
      console.log(relu)

      var subject = 0
      if (relu.subject == '德育')subject = 0
      else if (relu.subject == '智育')subject = 1
      else if (relu.subject == '体育')subject = 2
      // var data = {
      //   id:obj.id,
      //   from:obj.from,
      //   pass: true,
      //   subject: subject,
      //   index: obj.relu.num ,
      //   mark: obj.add,
      //   college: this.$store.state.name
      // }
      // console.log(data)
      // axios({
      //   url:'/college/exam',
      //   method: 'post',
      //   data: data
      // })
      for (var i = 0; i < this.checkedCardList.length; i++) {
        var obj = this.checkedCardList[i]
        var data = {
          id: obj.actId,
          from: obj.from,
          pass: true,
          subject: subject,
          index: relu.num,
          mark: add,
          college: this.$store.getters.getLoginUser.collegeName
        }
        for (var i = 0; i < this.examCardList.length; i++) {
          if (this.examCardList[i].id == obj.id) {
            this.examCardList.splice(i, 1)
          }
        }
        //lyl：更新为cloud接口
        axios({
          url: '/studentevaluation/api/exam/exam',
          method: 'post',
          data: data
        })
      }
    },
    pageKey (o, n) {
      this.reFresh = false
      this.$nextTick(() => {
        this.reFresh = true
      })
    }
  },
  mounted () {
    var count = 1
    var stu = 0
    var aso = 0
    var college = 0
    console.log('挂载')
    // axios('/college/hello')
    this.examCardList = []
    this.sourseList = [] // 清空双数组
    axios({
      // lyl 更新为cloud接口
      url: '/studentevaluation/api/exam/hello',
      methods: 'get',
      params: {
        // lyl 更新 原本是常量“数学与信息学院”
        userName: this.$store.getters.getLoginUser.collegeName
      }
    }).then(res => {
      console.log('------------hello------------')
      console.log(res)
      console.log('------------hello------------')
      for (var i = 0; i < res.data.data.length; i++) {
        var obj = res.data.data[i]
        if (obj.examed == true) continue
        var item = {
          actId: obj.actId,
          id: count++,
          title: obj.actName,
          from: '社团',
          selected: false,
          add: null,
          relu: null,
          name: obj.organization,
          number: obj.uploaderId,
          content: obj.actName,
          url: null
        }
        this.sourseList.push(item)
        this.$store.state.Enumber.all = this.sourseList.length
        if (this.type.typeName == '综合') { this.examCardList.push(item) } else if (this.type.typeName == item.from) this.examCardList.push(item)

        if (item.from == '个人')stu++
        else if (item.from == '社团')aso++
        else if (item.from == '学院')college++

        this.$store.state.Enumber.stu = stu
        this.$store.state.Enumber.asso = aso
        this.$store.state.Enumber.college = college
      }

      // this.sourseList = list
      // this.examCardList = list
      // this.$forceUpdate()
    })
    // lyl：更新为cloud版本 对应模块exam
    axios('/studentevaluation/api/exam/helloOther?college=' + this.$store.getters.getLoginUser.collegeName).then(res => {
      console.log('------------helloOther------------')
      console.log(res)
      console.log('------------helloOther------------')
      for (var i = 0; i < res.data.data.length; i++) {
        var obj = res.data.data[i]
        // if (obj.otherActDO.isChecked == true) continue
        // 已经check(审核通过) 或者 isAppealed == true (已经申诉) 跳过
        if (obj.otherActDO.isChecked == true || obj.otherActDO.isAppealed) continue
        var item = {
          actId: obj.otherActDO.id,
          id: count++,
          title: obj.otherActDO.otherActName,
          from: '个人',
          selected: false,
          add: null,
          relu: null,
          name: '',
          number: obj.otherActDO.studentId,
          content: obj.otherActDO.otherActName,
          // url: this.baseUrl + obj.otherActDO.otherActImageUrl
          // 修改了URL的形式, 直接用base64编码, 不需要baseURL
          url: obj.otherActDO.otherActImageUrl
        }
        this.sourseList.push(item)
        this.$store.state.Enumber.all = this.sourseList.length
        if (this.type.typeName == '综合') this.examCardList.push(item)
        else if (this.type.typeName == item.from) this.examCardList.push(item)

        if (item.from == '个人')stu++
        else if (item.from == '社团')aso++
        else if (item.from == '学院')college++

        this.$store.state.Enumber.stu = stu
        this.$store.state.Enumber.asso = aso
        this.$store.state.Enumber.college = college
      }
    })
    if (this.type.typeName == '综合') {
      this.examCardList = this.sourseList.slice(0) // 综合展示全部
      console.log('展示列表更新为综合')
    } else {
      var list = []
      for (var i = 0; i < this.sourseList.length; i++) {
        if (this.sourseList[i].from == this.type.typeName) {
          list.push(this.sourseList[i])
        }
      }
      this.examCardList = list
      console.log('展示列表更新')
    }
    this.pageKey++
    this.$forceUpdate()
  }
}
</script>

<style scoped lang="scss">
.bottomBar{
  width: 100%;
  height: px2rem(54);
  background:rgba(255,255,255,1);
  position: fixed;
  /*top: px2rem(557);*/
  bottom: px2rem(55);
  display: flex;
  align-items: center;
  font-size:px2rem(14);
  font-family:PingFang SC;
  font-weight:500;
  line-height:px2rem(20);
  z-index: 2;
  .selectAll{
    width: px2rem(58);
    height: 100%;
    margin-left: px2rem(36);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .circle{
      width:px2rem(20);
      height:px2rem(20);
      border:px2rem(1) solid rgba(112,112,112,1);
      border-radius:50%;
      opacity:1;
    }
  }
  .batchDeal{
    #yellow{
      color:rgba(254,201,6,1);
    }
    width: px2rem(78);
    height: 100%;
    margin-left: px2rem(81);
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    img{
      width: px2rem(16);
      height: px2rem(16);
    }
    .batchDeal-img{
      width: px2rem(16);
      height: px2rem(16);
      background: url("../../../assets/img/icon/star.svg");
      background-size: 100% 100%;
    }
    .batchDeal-img2{
      width: px2rem(16);
      height: px2rem(16);
      background: url("../../../assets/img/icon/star_yellow.svg");
      background-size: 100% 100%;
    }
    p{
      margin-left: px2rem(6);
    }
  }
  ._buttom{
    width: px2rem(90);
    height: px2rem(44);
    margin-left: px2rem(20);
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../../../assets/img/icon/uploader_file_btn_sub.svg");
    background-size: 100% 100%;
    color:rgba(255,255,255,1);
  }
}
  .showPlace{
    overflow-x: hidden;
    /*overflow-y: auto;*/
    width: 100%;
    height: px2rem(545);
    #showul{
      width: 100%;
      //height: calc(100% - #{px2rem(54)});
      height: 100%;
      overflow-y: scroll;
      //z-index: -1;
    }
    ul{
      list-style: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      .purple{
        /*background: url("../../../assets/img/icon/file_borde_p.svg");*/
        /*background-size: px2rem(347) px2rem(77);*/
        border-left: px2rem(5) solid #aa7cec;
      }
      .yellow{
        /*background: url("../../../assets/img/icon/file_borde_y.svg");*/
        /*background-size: px2rem(347) px2rem(77);*/
        border-left: px2rem(5) solid #fec906;
      }
      .red{
        /*background: url("../../../assets/img/icon/file_borde_red.svg");*/
        /*background-size: px2rem(347) px2rem(77);*/
        border-left: px2rem(5) solid #fc6985;
      }
      li{
        width: px2rem(347);
        height: px2rem(77);
        /*background: url("../../../assets/img/icon/file_borde_y.svg");*/
        /*background-size: 100% 100%;*/
        background: white;
        border-radius: px2rem(6);
        margin-top: px2rem(10);
        .shang{
          width: 100%;
          height: px2rem(44);
          display: flex;
          align-items: center;

          .cardTitle{
            height: px2rem(25);
            font-size:px2rem(18);
            font-family:PingFang SC;
            font-weight:800;
            line-height:px2rem(25);
            color:rgba(51,51,51,1);
            max-width: px2rem(219);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          img{
            width: px2rem(10);
            height: px2rem(17);
            margin-left: px2rem(15);
            /*margin-right: px2rem(11);*/
          }

        }
        .xia{
          display: flex;
          font-size:px2rem(12);
          font-family:PingFang SC;
          font-weight:500;
          line-height:px2rem(17);
          color:rgba(38,38,38,1);
          p{
            margin-left: px2rem(10);
          }
          img{
            /*margin-left: px2rem(6);*/
            width: px2rem(10);
            height: px2rem(7);
            margin-right: px2rem(11);
          }
          .add{
            margin-left: px2rem(44);
            width: px2rem(95);
            height: px2rem(22);
            border: px2rem(1) solid black;
            border-radius: px2rem(3);
            display: flex;
            align-items: center;
            justify-content: space-between;

          }
          .relu{
            margin-left: px2rem(57);
            width: px2rem(95);
            height: px2rem(22);
            border: px2rem(1) solid black;
            border-radius: px2rem(3);
            display: flex;
            align-items: center;
            justify-content: space-between;
            img{
              width: px2rem(10);
              height: px2rem(7);
              margin-right: px2rem(11);
            }
          }
        }
      }
    }
  }
  .checkCirle{
  width: px2rem(44);
  height: px2rem(44);
}
  .noCheck{
  background: url("../../../assets/img/icon/file_rb_n.svg");
  background-size: 100% 100%;
}
  .onCheck{
  background: url("../../../assets/img/icon/file_rb_s.svg");
  background-size: 100% 100%;
}
.noCheck1{
  background: url("../../../assets/img/icon/file_rb_n.svg");
  background-size: 100% 100%;
}
.onCheck1{
  /*background: #02A4ED;*/
  background: url("../../../assets/img/icon/file_rb_s.svg") center center no-repeat;
  background-size:px2rem(44) px2rem(44);
}
  #noBorder{
    border: white;
  }
  .addMarkWindow{
    #blue{
      color:rgba(2,164,237,1);
      input{
        border: rgba(2,164,237,1);
        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
          color:rgba(2,164,237,1);
        }
        input:-moz-placeholder, textarea:-moz-placeholder {
          color:rgba(2,164,237,1);
        }
        input::-moz-placeholder, textarea::-moz-placeholder {
          color:rgba(2,164,237,1);
        }
        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
          color:rgba(2,164,237,1);
        }
      }
    }
    width: px2rem(258);
    height: px2rem(195);
    background:rgba(255,255,255,1);
    opacity:1;
    border-radius:px2rem(31);
    float: left;
    position: absolute;
    z-index: 3;
    left: px2rem(58);
    bottom: px2rem(234);
    display: flex;
    flex-wrap: wrap;
    font-size:px2rem(18);
    font-family:PingFang SC;
    font-weight:400;
    line-height:px2rem(25);
    color:rgba(188,191,196,1);
    opacity:1;
    .item{
      width: 50%;
      margin-top: px2rem(18);
      display: flex;
    }
    .circle{
      width:px2rem(16);
      height:px2rem(16);
      border:px2rem(2) solid rgba(188,191,196,1);
      border-radius:50%;
      opacity:1;
      margin-left: px2rem(31);
    }
    .circle2{
      width:px2rem(16);
      height:px2rem(16);
      border:px2rem(4) solid rgba(2,164,237,1);
      border-radius:50%;
      opacity:1;
      margin-left: px2rem(31);
    }
    .mark{
      margin-left: px2rem(15);
    }
    .constItem{
      display: flex;
      width: 50%;
      margin-top: px2rem(18);
      .inputMark{
        width: px2rem(55);
        height: px2rem(25);
        margin-left: px2rem(8);
        /*margin-top: px2rem(17);*/
        position: relative;
        top: px2rem(-1);
        border:px2rem(1) solid rgba(188,191,196,1);
        opacity:1;
        border-radius:px2rem(4);
        font-size:px2rem(10);
        font-family:PingFang SC;
        font-weight:400;
        line-height:px2rem(14);
        color:rgba(188,191,196,1);
        opacity:1;

      }
    }
  }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  font-size:px2rem(10);
  font-family:PingFang SC;
  font-weight:400;
  line-height:px2rem(14);
  color:rgba(188,191,196,1);
  opacity:1;
  display: flex;
  align-items: center;
  justify-content: center;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  font-size:px2rem(10);
  font-family:PingFang SC;
  font-weight:400;
  line-height:px2rem(14);
  color:rgba(188,191,196,1);
  opacity:1;
  display: flex;
  align-items: center;
  justify-content: center;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  font-size:px2rem(10);
  font-family:PingFang SC;
  font-weight:400;
  line-height:px2rem(14);
  color:rgba(188,191,196,1);
  opacity:1;
  display: flex;
  align-items: center;
  justify-content: center;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  font-size:px2rem(10);
  font-family:PingFang SC;
  font-weight:400;
  line-height:px2rem(14);
  color:rgba(188,191,196,1);
  opacity:1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*获得焦点隐藏polaceholder*/
/* WebKit浏览器 */
input:focus::-webkit-input-placeholder { color:transparent; }

/* Firefox 4 至 18 */
input:focus:-moz-placeholder { color:transparent; }

/* Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

/* IE 10+ */
input:focus:-ms-input-placeholder { color:transparent; }
</style>
